<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>过渡</title>
    <style media="screen">

      /*img:hover{
        transform: rotate(180deg);
        background-color: green;
      }
      img{
        transition: transform 0.5s,background-color 2s;
        transition: all 2s ease-in-out 2s;
      }*/

      /*img:hover{
        transform: translate(600px,600px);
      }
      img{
        transition: 2s cubic-bezier(0.6,0.1,0.1,0.7);
        transition: 2s ease-in-out;
      }*/

      div:hover img{
        transform: translate(600px);
      }
      .i0{
        transition: 2s linear 0.5s;
      }
      .i1{
        transition: 0.5s step-end 2s;  /*前一时间为执行时间，后一时间为延迟时间*/
      }
      .i2{
        transition: 2s steps(2,start) 2s;
        /*transition: 2s step-start 2s;*/
      }
    </style>
  </head>
  <body>
    <div class="div1">
      <img class="i0" src="basketball.png" alt="篮球"><br>
      <img class="i1" src="basketball.png" alt="篮球"><br>
      <img class="i2" src="basketball.png" alt="篮球">
    </div>
  </body>
</html>
